import React from 'react';
import {connect} from 'dva';
import {Layout, Icon} from 'antd';
import './index.less';
import BaseComponent from "components/Base/BaseComponent";
import Panel from "components/Base/Panel/Panel";
import Button from "components/Base/Button";
import Log from "utils";

const {Content} = Layout;
const Ripple = Button.Ripple;

@connect()
export default class extends BaseComponent {

  render() {

    Log.debug('Button.Ripple', Button.Ripple);

    return (
      <Layout className="full-layout page button-page">
        <Content>
          <Panel title="AntD Button">
            <Button type="primary">Primary</Button>
            <Button tooltip="Tip!">Default</Button>
            <Button type="dashed">Dashed</Button>
            <Button type="danger">Danger</Button>
          </Panel>

          <Panel title="Ripple Button (Material Design)">
            <div>
              <Ripple>Default</Ripple>
              <Ripple type="primary">Primary</Ripple>
              <Ripple type="danger">Danger</Ripple>
            </div>
            <div>
              <Ripple ghost>Default</Ripple>
              <Ripple ghost type="primary">Primary</Ripple>
              <Ripple ghost type="danger">Danger</Ripple>
            </div>
          </Panel>

          <Icon type="refresh"/>
          <Icon type="sync" />
        </Content>
      </Layout>
    );
  }
}
